<template>
  <Navigation></Navigation>
  <div class="boder">
    <div class="boder1">
    <el-card style="width: 900px" shadow="always">
      <el-image :src="userInfo.img" style="width: 50px; height: 50px"></el-image>
      <span class="boder-name">{{ userInfo.sno }}</span>
      <el-button class="boder-button" type="success" plain>
        <router-link to="/tearelease" style="text-decoration: none; color: inherit; ">去发布</router-link>
      </el-button>
      <el-button class="boder-button1" type="danger" @click="logout">退出登录</el-button>
    </el-card>
    </div>
    <div class="pop">
      <el-button class="user" type="primary" @mouseenter="getCompetition">已发布的竞赛</el-button>
      <el-button class="user1" type="primary" @click="getActivity">已发布的活动</el-button>
    </div>
  </div>
    <div class="node" v-for="table in competition" :key="table.id">
    <el-card style="width: 900px" shadow="hover">
      <el-image :src="'http://123.249.101.250:3000/static/'+table.face" style="width: 150px; height: 110px"></el-image>
      <span>{{ table.name }}</span>
      <div class="isli">
      <li>主办方：{{ table.sponsor }}</li>
      <li>竞赛级别：</li>
      <li>报名时间：{{ table.signstartdate }}</li>
      <li>竞赛时间：{{ table.startdate }}</li>
      <li>竞赛状态：报名中</li>
      </div>
      <el-button class="boder-button3" type="success" plain @click="showFrom(table.id)">后台管理 </el-button>
      <el-dialog title="竞赛信息" v-model="dialogFormVisible" width="100%" align-center>
        <article style="margin-top: 20px;caret-color: transparent;">
          <!--  展示学生信息表格-->
          <el-table :data="paginatedData" stripe style="width: 100%">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="id" label="编号" width="55" />
            <el-table-column prop="stuname" label="姓名"  sortable width="150" />
            <el-table-column prop="name" label="学校" width="120" />
            <el-table-column prop="major" label="专业" width="120" />
            <el-table-column prop="sno" label="学号" width="120" />
            <el-table-column prop="college" label="学院" width="120" />
            <el-table-column prop="grade" label="年级" width="120" />
            <el-table-column prop="telephone" label="电话" width="150" />
            <el-table-column prop="email" label="邮箱" width="150" />
            <el-table-column fixed="right" label="操作" min-width="165">
              <template #default="scope">
                <el-button link type="primary" size="small">编辑</el-button>
                <el-button link type="warning" size="small" @click="delStuUserInfoById(scope.row.id)" >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <footer style="margin-top: 40px">
            <!--分页-->
            <div class="demo-pagination-block">
              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                             :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" :total="totalItems">
              </el-pagination>
              </div>
          </footer>
        </article>
      </el-dialog>
        <el-button class="boder-button4" type="danger" plain @click="delComInfoById(table.id)">删除竞赛</el-button>

    </el-card>
  </div>
  <div class="node" v-for="ider in activity" :key="ider.id">
    <el-card style="width: 900px" shadow="hover">
      <el-image :src="ider.face" style="width: 150px; height: 110px"/>
      <span>{{ ider.name }}</span>
      <div class="isli">
        <li>主办方：{{ ider.sponsor }}</li>
        <li>竞赛级别：</li>
        <li>报名时间：{{ ider.signstartdate }}</li>
        <li>竞赛时间：{{ ider.startdate }}</li>
        <li>竞赛状态：报名中</li>
      </div>
      <el-button class="boder-button3" type="success" plain>后台管理</el-button>
      <el-button class="boder-button4" type="danger" plain @click="delComInfoById(ider.id)">删除竞赛</el-button>
    </el-card>
  </div>
  <div class="info">
  <Bottom></Bottom>
  </div>
</template>
<script setup>
import Navigation from "@/components/Navigation.vue";
import Bottom from "@/components/Bottom.vue";
import {computed, onMounted, ref} from "vue";
import axios from "axios";
import router from "@/router";

/**
 * 删除竞赛信息
 * @param id
 */
const delComInfoById =(id)=>{
  axios.delete(`api/TbCompetitionActivityController/removeCompetitioninfo/${id}`).then(res => {
    console.log(res.data)
    getCompetition();
    getActivity();
  })
}

/**
 * 删除学生用户信息
 */
const delStuUserInfoById =(id)=>{
  axios.delete(`api/TbEntryformController/removeEntryUserinfo/${id}`).then(res => {
    console.log(res.data)
    showFrom();
  })
}

//退出登录
const logout = () => {
  localStorage.removeItem('token')
  router.push({
    path:'/StuIndex'
  })
}

/**
 * 分页
 * @type
 */
const currentPage = ref(1);
const pageSize = ref(6);
const totalItems = computed(() => tableData.value.length);
const paginatedData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return tableData.value.slice(start, end);
});
const handleCurrentChange = (newPage) => {
  currentPage.value = newPage;
};

const handleSizeChange = (newSize) => {
  pageSize.value = newSize;
};


//获取用户信息
const id = localStorage.getItem('token')
const userInfo = ref([])
const getUserInfo = () => {
  axios.get(`http://localhost:3000/TbUserinfoController/getUserinfoById/${id}`).then(res=>{
    console.log(res);
    userInfo.value = res.data.data
  })
}


onMounted(() => {
  // getData();
  getUserInfo()
  getCompetition();
})


//查询竞赛信息
const dialogFormVisible = ref(false)
const tableData = ref('')
const showFrom = (comId) => {
  axios.get(`http://localhost:3000//TbEntryformController/selectActiveWithEntryById/${comId}`).then(res => {
    tableData.value = res.data.data
    console.log(res.data.data)
    currentPage.value = 1; // 重置页码
  })
  dialogFormVisible.value = true
}


//查询竞赛
const competition = ref('')

const getCompetition = () => {
  axios.get(`http://localhost:3000/TbCompetitionActivityController/getTeaCompetitioninfo/001/${userInfo.value.sno}`).then(res => {
    competition.value = res.data.data
    console.log(res.data.data)
  })
}
// 查询活动

const getActivity = () => {
  axios.get(`http://localhost:3000/TbCompetitionActivityController/getTeaCompetitioninfo/002/${userInfo.value.sno}`).then(res => {
    competition.value = res.data.data
    console.log(res.data.data)
  })
}


//查询教师用户名和头像
// const user = ref('')
// const getData = () => {
//   axios.get('http://localhost:3000//TbUserinfoController/selectTbUserinfo').then(res => {
//     user.value = res.data.data
//     console.log(res.data.data)
//   })
// }

</script>
<style  scoped>
.boder{
  caret-color: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin-top: -90px;
}
.boder1{
  margin-top: -200px;
  width: 900px;
  height: 100px;
  border-radius: 30px;
  position: absolute;
}
.boder-name{
  margin-left: 30px;
  line-height: 100px;
  position: absolute;
  margin-top: -45px;
}
.boder-button{
  margin-left: 630px;
  border-radius: 30px;
}
.boder-button1{
  border-radius: 30px;
}
.pop{
  margin-top: 40px;
  margin-bottom: 40px;
  display: flex;
  margin-left:-663px;
  background-color: #f5f7fa;
}
.user{
  border-radius: 30px;
  position: absolute;
}
.user1{
  border-radius: 30px;
  position: absolute;
  margin-left: -120px;
}
.node{
  caret-color: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position:relative;
  top: -300px;
  margin-top: 20px;
}

.node span{
  margin-left: 20px;
  line-height: 100px;
  position: absolute;
  margin-top: -45px;
}
.isli{
  margin-left: 170px;
  margin-top: -80px;
  position: absolute;
  font-size: 10px;
  color: #79bbff;
  list-style: none;
}
.boder-button3{
  margin-left: 600px;
  border-radius: 30px;
  margin-top: 30px;
  position: absolute;
}
.boder-button4{
  margin-left: 600px;
  border-radius: 30px;
  margin-top: 70px;
  position: absolute;
}

</style>